<template>
	<el-main>
		<el-card class="box-card" shadow="never">
			<el-button type="primary" @click="addTop" icon="el-icon-plus"> 添加顶级菜单</el-button>
			<div style="width:100%;height:0;border-bottom:#E4E7ED 1px dashed;margin-top: 10px"></div>
			<el-table
				:data="tableData"
				style="width: 100%;"
				row-key="id"
				:tree-props="{children: 'children'}">
				<el-table-column
					type=""
					prop="id"
					width="120px"
					label="编号">
				</el-table-column>
				<el-table-column
					prop="name"
					label="菜单名">
				</el-table-column>
				<el-table-column
					prop="path"
					label="路由">
				</el-table-column>
				<el-table-column
					prop="type"
					label="标识">
				</el-table-column>
				<el-table-column
					label="图标">
					<template #default="scope">
						<el-icon><component :is="scope.row.icon || 'el-icon-menu'" /></el-icon>
					</template>
				</el-table-column>
				<el-table-column
					label="类型">
					<template #default="scope">
						<el-tag v-if="scope.row.is_menu == 1">功能</el-tag>
						<el-tag type="success" v-else>菜单</el-tag>
					</template>
				</el-table-column>
				<el-table-column
					prop="sort"
					label="排序">
				</el-table-column>
				<el-table-column
					prop="operation"
					label="操作">
					<template #default="scope">
						<el-button @click="add(scope.row)" type="text" size="small" v-if="scope.row.is_menu == 2">添加子菜单</el-button>
						<el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
						<el-button @click="del(scope.row)" type="text" size="small">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>

		<save-dialog v-if="dialogVisible" ref="saveDialog" @success="handleSuccess" @closed="dialogVisible=false" :close-on-click-modal="false"></save-dialog>
	</el-main>
</template>

<script>
	import saveDialog from './save'

	export default {
		name: "menus",
		components: {
			saveDialog
		},
		data() {
			return {
				tableData: [],
				dialogVisible: false,
				pName: "",
			}
		},
		mounted() {
			this.getList()
		},
		methods: {
			// 获取菜单列表
			async getList() {
				let res = await this.$API.menu.list.get()
				this.tableData = res.data
			},
			add(row) {
				this.dialogVisible = true;

				this.$nextTick(() => {
					this.$refs.saveDialog.open('add').setAddData({
						pid: row.id,
						name: row.name,
					})
				})
			},
			edit(row) {
				this.dialogVisible = true;

				this.$nextTick(() => {
					this.$refs.saveDialog.open('edit').setData(row)
				})
			},
			del(row) {
				this.$confirm('确定删除此菜单?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(async () => {
					let res = await this.$API.menu.del.get({id: row.id})
					if (res.code == 0) {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						setTimeout(() => {
							this.getList();
						}, 500)
					} else {
						this.$message({
							type: 'error',
							message: res.msg
						});
					}
				}).catch(() => {});
			},
			addTop() {
				this.dialogVisible = true;

				this.$nextTick(() => {
					this.$refs.saveDialog.open('add').setAddData({
						pid: 0,
						name: '顶级菜单',
					})
				})
			},
			handleSuccess() {
				this.dialogVisible = false
				this.getList()
			}
		}
	}
</script>

<style scoped>
.el-button--small {
	padding: 0 !important;
}
</style>
